<style lang="scss" scoped>
    .head{
        width: 100%;
        height: $header-height;
        position: absolute;
        top: 0;
        right: 0;
        .drag{
            -webkit-user-select: none;
            -webkit-app-region: drag;
            width: calc(100% - 30px);
        }
        .close{
            width: 30px;
            line-height: 30px;
            color: #808695;
        }
    }
    .login{
        width: 100vw;
        height: 100vh;
        background: url('~@/assets/bg.jpg') no-repeat;
        background-size: cover;
        .login-box{
            width: 350px;
            height: 360px;
            background: url('~@/assets/login-box.png') no-repeat;
            background-size: contain;
            
        }
        .register-box{
            width: 350px;
            height: 447px;
            background: url('~@/assets/register-box.png') no-repeat;
            background-size: 100% 100%;
        }
        .content{
            width: 200px;
        }
    }  
    .game-btn1{
        border:0;
        color: #f1f1f1;
        background: url('~@/assets/game-btn1.png') no-repeat;
        background-size: 100% 100%;
    }
    .game-btn2{
        border:0;
        color: #f1f1f1;
        background: url('~@/assets/game-btn2.png') no-repeat;
        background-size: 100% 100%;
    }
    .link{
        color: #A79059;
        font-weight: bold;
    }
    .icon{
        position: absolute;
        font-size: 20px;
        left: -30px;
        top: 8px;
        color: #f1f1f1;
    }
</style>
<style lang="scss">
    .login .ipt .ivu-input,.login .ipt .ivu-select-selection{
        background: transparent;
        color: #f1f1f1;
    }
    .login .radios{
        color: #f1f1f1;
        .ivu-radio-inner:after{
            background-color: #A79059;
        }
        .ivu-radio-checked .ivu-radio-inner{
            border-color: #A79059;
        }
    }
</style>
<template>
    <div class="login pt-5">
        <div class="head d-flex">
            <div class="drag w-100b"></div>
            <Icon type="md-close" @click="$ipcRenderer.send('close')" class="pointer close"/>
        </div>
        <img class="d-block mx-auto logo" style="width: 60px;" src="~@/assets/logo.png" alt="">
        <h2 class="color-fff text-center mt-1 ">陆军军事交通学院</h2>
        <div class="mx-auto mt-3 pt-2" :class=" is_login?'login-box':'register-box' ">
            <div class="content mx-auto py-5" v-if="is_login">
                <div class="relative">
                    <Icon type="md-person" class="icon"/>
                    <Input placeholder="学生学号/教师教号" v-model="fm.no"  class="ipt"></Input>
                </div>
                <div class="relative mt-2">
                    <Icon type="md-lock" class="icon"/>
                    <Input placeholder="请输入密码" type="password" v-model="fm.pwd" class="ipt"> </Input>
                </div>
                <RadioGroup v-model="type" class="ipt my-1 radios">
                    <Radio label="t">我是老师</Radio>
                    <Radio label="s">我是学生</Radio>
                </RadioGroup>
                <Button type="primary" class="mt-1 game-btn1" @click="handle_login" long>登录</Button>
                <a href="#" class="mt-1 float-right link" @click="is_login=false">注册为学员</a>
            </div>
            <div class="content mx-auto py-5" v-else>
                <div class="relative">
                    <Icon type="md-person" class="icon"/>
                    <Input placeholder="请输入学号" v-model="reg_fm.no"  class="ipt"></Input>
                </div>
                <div class="relative my-2">
                    <Icon type="md-flag" class="icon"/>
                    <Input placeholder="请输入姓名" v-model="reg_fm.name" class="ipt"> </Input>
                </div>
                <div class="relative my-2">
                    <Icon type="md-lock" class="icon"/>
                    <Input placeholder="请输入密码" v-model="reg_fm.pwd" class="ipt" type="password"> </Input>
                </div>
                <div class="relative my-2">
                    <Icon type="ios-people" class="icon"/>
                    <Select class="ipt" v-model="reg_fm.cid">
                        <Option v-for="(item,index) in classList" :value="item.id" :key="index">{{ item.name }}班</Option>
                    </Select>
                </div>

                <RadioGroup v-model="reg_fm.sex" class="ipt mb-2 radios">
                    <Radio :label="1">男</Radio>
                    <Radio :label="0">女</Radio>
                </RadioGroup>
                <Row :gutter="20">
                    <Col span="12">
                        <Button long @click="is_login=true" class="game-btn2">返回登录</Button>
                    </Col>
                    <Col span="12">
                        <Button type="primary" long @click="handle_reg" class="game-btn1">注册</Button>
                    </Col>
                </Row>
            </div>
        </div>
    </div>
</template>

<script>
import {t_login} from "@/common/tapi"
import {s_login,class_list,register} from "@/common/sapi"
export default {
    data(){
        return {
            type:'t',
            fm:{
                no:'',
                pwd:''
            },
            reg_fm:{
                no:'',
                name:'',
                pwd:'',
                cid:'',
                sex:1
            },
            is_login:true,
            classList:[]
        }
    },
    methods:{
        handle_reg(){
            for (const key in this.reg_fm) {
                if (key!='sex' &&!this.reg_fm[key]) {
                    this.$Notice.warning({
                        title: '提示',
                        desc: '请完整填写注册信息'
                    });                   
                    return  
                }
            }
            register(this.reg_fm)
            .then(res=>{
                if(res){
                    this.$Notice.success({
                        title: '成功',
                        desc: '注册成功，请继续登录！'
                    });
                    this.type='s'
                    this.is_login=true
                }
            })
        },
        handle_login(){
            const func={s:s_login,t:t_login}
            func[this.type](this.fm)
            .then(res=>{
                if(res){
                    localStorage.setItem('token',res.data.jwt)
                    localStorage.setItem('exp',res.data.exp)
                    localStorage.setItem(this.type+'id',res.data.info.id)
                    localStorage.setItem('userinfo',JSON.stringify(res.data.info))
                    localStorage.setItem('currentIdentity',this.type)
                    if(this.type==='s')
                        localStorage.setItem('cid',res.data.info.cid)
                    this.$router.push({path:`/${this.type}/center`})
                    
                }
            })

        }
    },
    created(){
        document.onkeydown = (e)=>{
            const keyCode = e.keyCode || e.which || e.charCode;
            if(e.altKey && e.ctrlKey && keyCode===73) {
                this.$ipcRenderer.send('devTools')
                e.preventDefault();
                return false;
            }
        }
        
        if(localStorage.getItem('token') && localStorage.getItem('currentIdentity')){
            this.$router.push({path:`/${localStorage.getItem('currentIdentity')}/center`})
        }else{
            class_list()
            .then(res=>{
                if(res){
                    this.classList=res.data.list
                }else{
                    this.$Modal.error({
                        title: '提示',
                        content: '网络连接错误'
                    });
                }
            })
        }
        
    },
}
</script>